<template>
	<!-- 专题聚焦 -->
	<div class="subjuctBox">

		<div class="subjuctContainer">
			<div class="subjuctTitle">专题聚焦</div>
			<div class="box">
				<div class="subjuct" style='transform :translateX(0px)'>
					<div class="subjuetList" v-for="item in list">
						<img :src="item.src" alt="" class="img1  mhover">
						<p class="p1 mhover">{{item.content}}</p>
					</div>
				</div>

			</div>

		</div>
		<div class="btn_page">
			<span class="left iconfont icon-a-Leftarrow mhover"></span>
			<span class="right iconfont icon-a-Rightarrow mhover"></span>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						id: 1,
						title: '1',
						content: '1 2022年岁末，中央经济工作会议指出，要大力发展数字经济，提升常态化监管水平，支持平台企业在引领发展、创造就业、国际竞争中大显身手。针对平台经济的新治理体...',
						src: 'img/bg.jpg'
					},
					{
						id: 1,
						title: '2',
						content: '2 2022年岁末，中央经济工作会议指出，要大力发展数字经济，提升常态化监管水平，支持平台企业在引领发展、创造就业、国际竞争中大显身手。针对平台经济的新治理体...',
						src: 'img/bg.jpg'
					},
					{
						id: 1,
						title: '3',
						content: '3 2022年岁末，中央经济工作会议指出，要大力发展数字经济，提升常态化监管水平，支持平台企业在引领发展、创造就业、国际竞争中大显身手。针对平台经济的新治理体...',
						src: 'img/bg.jpg'
					}, {
						id: 1,
						title: '4',
						content: '4 2022年岁末，中央经济工作会议指出，要大力发展数字经济，提升常态化监管水平，支持平台企业在引领发展、创造就业、国际竞争中大显身手。针对平台经济的新治理体...',
						src: 'img/bg.jpg'
					}, {
						id: 1,
						title: '5',
						content: '5 2022年岁末，中央经济工作会议指出，要大力发展数字经济，提升常态化监管水平，支持平台企业在引领发展、创造就业、国际竞争中大显身手。针对平台经济的新治理体...',
						src: 'img/bg.jpg'
					},
					{
						id: 1,
						title: '2',
						content: '6 2022年岁末，中央经济工作会议指出，要大力发展数字经济，提升常态化监管水平，支持平台企业在引领发展、创造就业、国际竞争中大显身手。针对平台经济的新治理体...',
						src: 'img/bg.jpg'
					},
					{
						id: 1,
						title: '3',
						content: '7 2022年岁末，中央经济工作会议指出，要大力发展数字经济，提升常态化监管水平，支持平台企业在引领发展、创造就业、国际竞争中大显身手。针对平台经济的新治理体...',
						src: 'img/bg.jpg'
					}, {
						id: 1,
						title: '4',
						content: '8 2022年岁末，中央经济工作会议指出，要大力发展数字经济，提升常态化监管水平，支持平台企业在引领发展、创造就业、国际竞争中大显身手。针对平台经济的新治理体...',
						src: 'img/bg.jpg'
					}, {
						id: 1,
						title: '5',
						content: '9 2022年岁末，中央经济工作会议指出，要大力发展数字经济，提升常态化监管水平，支持平台企业在引领发展、创造就业、国际竞争中大显身手。针对平台经济的新治理体...',
						src: 'img/bg.jpg'
					}
				]
			}
		},
		created() {

		},
		mounted() {
			this.$nextTick(() => {
				this.sss()
			})

		},
		methods: {
			sss() {
				let ele = document.querySelectorAll('.subjuetList');
				let warpper = document.querySelector('.subjuct');
				// ele.forEach((item) => {
				// 	item.addEventListener('click', (e) => {
				// 		warpper.style.transform = `translateX(0px)`
				// 		e.target.scrollIntoView({
				// 			behavior: "smooth",
				// 			inline: "center"
				// 		});

				// 	})
				// })
				let btn_page = document.querySelector('.btn_page');
				btn_page.addEventListener('click', (e) => {
					let btnEle = e.target.classList;

					let Tx = parseFloat(getComputedStyle(warpper).transform.substring(7).split(',')[4]);
					let len = ele.length;
					let imgWidth = +getComputedStyle(ele[0]).width.replace('px', '');
					let allWidth = 1200;
					if (Math.abs(Tx) < allWidth) {
						let isLeft = btnEle.contains('left');
						if (!isLeft) {
							if (Math.abs(Tx) < (imgWidth + 20)) {
								Tx = 0;
							} else {
								Tx = Tx + (imgWidth + 20);
							}

						} else {

							console.log(Tx, allWidth, '+ (imgWidth+48)');
							if (Math.abs(Tx) > allWidth || (allWidth - Math.abs(Tx)) < (imgWidth + 20)) {
								Tx = Tx;
							} else {
								Tx = Tx - (imgWidth + 20);
							}
						}
					}
					console.log(warpper, 'warpper');
					warpper.style.transform = `translateX(${Tx}px)`
				})
			}
		}
	}
</script>

<style>
	.subjuctBox {
		width: 1280px;
		margin: auto;
		margin-top: 60px;
		position: relative;
		/* overflow: hidden; */

		.subjuctTitle {
			text-align: center;
			height: 30px;
			font-size: 30px;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			line-height: 30px;
			cursor: pointer;
		}

		.btn_page {
			width: calc(100% - 40px);
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 20px;
			/* right: 20px; */
			display: flex;
			justify-content: space-between;

			.left,
			.right {
				display: inline-block;
				width: 40px;
				height: 40px;
				background: #FFFFFF;
				font-size: 24px; 
				text-align: center;
				line-height: 40px;
				box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
				border-radius: 50%;

			}

			.left {
			
			}

			.right {


			}
		}

		.subjuctContainer {

			width: 1200px;
			margin: auto;

			.box {
				width: 1200px;
				overflow: hidden;
				position: relative;

				.subjuct {
					width: 1200px;
					padding-top: 24px;
					display: flex;
					transition: 0.5s transform linear;
					/* justify-content: flex-start; */



					/* flex-shrink: 1; */
					.subjuetList {
						margin-right: 20px;
						width: 224px;
						/* height: 126px ; */

						flex-shrink: 0;

						.img1 {
							width: 224px;
							height: 126px;
							border-radius: 4px;
							width: auto;
							height: auto;
							margin: auto;
							object-fit: cover;
							transition: 0.2s;

							&:hover {
								transform: scale(1.1);

							}
						}

						.p1 {
							margin-top: 16px;
							text-align: center;
							width: 224px;
							height: 48px;
							font-size: 16px;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #333333;
							line-height: 24px;
							overflow: hidden;
							text-overflow: ellipsis;
							-webkit-line-clamp: 2;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							white-space: pre-wrap;
						}


					}

					.subjuetList:last-child {
						margin-right: 0;
					}
				}
			}

		}

	}
</style>